<template>
    <div>
        <el-form ref="data.form" :model="data.form" label-width="80px">
            <el-form-item label="信息分类">
                <el-select v-model="data.form.categoryId" placeholder="请选择类型">
                <el-option v-for="item in data.category" :key="item.id" :value="item.value" :label="item.category_name" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="新闻标题" prop="title">
                <el-input v-model="data.form.title"></el-input>
            </el-form-item>
            <el-form-item label="发布日期">
                <el-col :span="11">
                    <el-date-picker v-model="data.form.createDate" type="date" placeholder="选择日期" disabled></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="文件缩略">
                <uploading :imgUrl.sync="data.form.imgUrl" :config="uploadImgConfig" ></uploading>
            </el-form-item>
            <el-form-item label="内容详细" prop="content">
                <!-- vue-quill-editor API https://www.npmjs.com.package.vue-quill-editor-->
                <!-- <el-input type="textarea" v-model="data.form.content"></el-input> -->
                <quillEditor v-model="data.form.content" ref="myQuillEditor" :options="data.editorOption"></quillEditor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="data.submitLoading" @click="onSubmit">保存</el-button>
                <el-button @click="will_back">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { reactive ,ref , isRef ,toRefs ,onMounted, watch, onActivated } from '@vue/composition-api';
import { GetList, EditInfo} from "@/api/news";
// import { common } from "../../api/common";
import { timestampToTime }  from "../../utils/common";
//引入上传图片组件
import uploading from "../../components/Uploading/uploading";
//引入富文本编译器
import { quillEditor } from "vue-quill-editor"; 
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
    name: "InfoDetail",
    components: { quillEditor, uploading },
    setup(props, { root }) {
        const dialogImageUrl = ref('');
        const dialogVisible = ref(false);
        const disabled = ref(false);
        const formLabelWidth = ref('70px');

         // 图片上传配置
        const uploadImgConfig = reactive({
            action: "http://up-z2.qiniup.com",
            accesskey: "JHu1DqXIBJ1gWzo8oCri4Sbcdks5FumgvaAt_eJ7",
            secretkey: "KYkpdgJO3IYD8Vsd9G95SnsmnSpUSOtSOcoeVWRS",
            buckety: "webjshtml"
        });
        const data = reactive({
            id: root.$route.params.id || root.$store.getters["infoDetail/infoId"],
            category:[],
            editorOption:{},
            submitLoading: false,
            form: {
                categoryId: "",
                title: "",
                createDate: "",
                content: "",
                imgUrl:"",
            }
        })
        // console.log(props, 'props')
        let id = root.$route.params.id || root.$store.getters["infoDetail/infoId"]
        let title = root.$route.params.title || root.$store.getters["infoDetail/infoTitle"]
        
        /*
          获取信息分类 
         */
        const getInfoCategory=(()=>{
            console.log('信息列表', '')
            // getInfoCategory();
            root.$store.dispatch('common/getInfoCategory').then(response => {
                data.category = response
                console.log(response, 'getInfoCategory')
            })
        })
        
        /* 
          获取信息内容
        */
        const getInfo = () => {
            let requestData = {
                pageNumber: 1,
                pageSize: 1,
                id: data.id
            }
            GetList(requestData).then(response => {
                let responseData = response.data.data.data[0]
                console.log(response, 'GetList')
                console.log(requestData, 'requestData')
                data.form = {
                    categoryId: responseData.categoryId,
                    title: responseData.title,
                    createDate: timestampToTime(responseData.createDate),
                    content: responseData.content
                }
            })
        }
        /*
          用来格式化内容Function(row, column, cellValue, index) 
        */
        // const table_time = ((row, column, cellValue, index)=>{
        //     // console.log(row,'row')
        //     return timestampToTime(row.createDate)
        // })
        /* 
          生命周期
        */
        onMounted(()=>{
            console.log('信息列表', '')
            //获取分类
            getInfoCategory();
            // root.$store.dispatch('common/getInfoCategory').then(response => {
            //     options.category = response
            // })
            //获取分类
            // getList();
            getInfo();


        })
        onActivated(() => {
            data.id = root.$route.params.id || root.$store.getters["infoDetailed/infoId"];
            // getInfo()
        })
        console.log(id, 'id');
        console.log(title, 'title')
        // root.$store.commit("infoDetail/SET_ID",id)
        // root.$store.commit("infoDetail/SET_TITLE",title)
        // console.log("id"+root.$store.getters["infoDetail/infoId"])
        // console.log("title"+root.$store.getters["infoDetail/infoTitle"])

        /* 
          提交表单
        */
        const onSubmit = (()=> {
            // console.log('submit!');
            let requestData = {
                id: data.id,
                categoryId: data.form.categoryId,
                createDate: data.form.createDate,
                title: data.form.title,
                content: data.form.content,
                imgUrl: data.form.imgUrl
            }
            data.submitLoading = true
            EditInfo(requestData).then(response => {
                // console.log(response, 'EditInfo')
                let responseData = response.data
                root.$message({
                    message: responseData.message,
                    type: 'success',
                })
                //表单提交理由跳转回上一个页面
                root.$router.push({
                    name: 'InfoIndex'
                })
                data.submitLoading = false
                /**
                 * 两种刷新数据方式
                 * 1、暴力型，直接刷新接口
                 * 2、返回列表，手动修改指定的数据
                 */
                // emit("getListEmit");
                // 重置表单
                // resetForm()
                // root.$refs['addInfoForm'].resetFields();
            }).catch(error => {
                data.submitLoading = false
            })

        })
        const will_back = (()=>{
            root.$router.push({
                name: 'InfoIndex'
            })
        })
        return {
            dialogImageUrl,dialogVisible,disabled,formLabelWidth,
            data,onSubmit,will_back,
            getInfoCategory,getInfo,uploadImgConfig
        }
    }
}
</script>

<style lang="scss" scoped>
                
</style>